<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
<go></go><go></go><go></go><go></go><go></go><hr>
    <counter></counter>


</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("go",{
        template:"<div><button v-on:click=\"num++\">点击++{{num}}</button></div>",   //html元素
        data(){                                                                     //data必须是方法
            return{
                num:0
            }
        }
    });
    //创建一个对象  局部组件，需要在vue实例进行注册
    const aa = {
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    };



    var vm = new Vue({
        el:"#app",     //  elment 缩写：元素  绑定的是id属性值为app的页面元素 ,对象作用范围是在当前绑定元素下
        data:{          //data属性，是一个数据对象 {}
            name:"hello app2",

        },
        components:{
            // counter:aa     //counter代表的组件名称标签(随便写)    aa 自定义的组件名称
            counter: aa,
        }


    })
</script>
</html>